<template>
    <div class="page-community-index">
        <CustomNav title="精彩视频" type="white" :fixed="true"></CustomNav>
        <CustomNav title="精彩视频" :opacity="0"></CustomNav>
        <PostCard
            v-if="post"
            :key="index"
            :index="index"
            :post="post"
            @click="onClickPost"
            @publish-comment="onPublishComment(post)">
        </PostCard>
        <CommentItem v-for="(comment, index) in commentList"
            :key="index"
            :comment="comment">
        </CommentItem>
    </div>
</template>

<script>
import store from '@/store';
import {
    mapState,
} from 'vuex';
import {
    api,
} from '@/lib/api';
import PostCard from '@/features/community/postCard.vue';
import CommentItem from '@/features/community/commentItem.vue';
// import {
//     placeholderImg,
// } from '@/lib/utils';
import mixin from '@/lib/mixin';

export default {
    name: 'CommunityIndex',
    mixins: [
        mixin,
    ],
    components: {
        PostCard,
        CommentItem,
    },
    data() {
        return {
            postId: null,
            // post: {
            //     id: 1,
            //     content: '挑战无人区，加油哦',
            //     video: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
            // },
            // commentList: [
            //     {
            //         nickname: '昵称',
            //         avatar: placeholderImg,
            //         content: '内容',
            //         created_at: '2019-10-10 12:20:10',
            //     },
            //     {
            //         nickname: '昵称',
            //         avatar: placeholderImg,
            //         content: '内容',
            //         created_at: '2019-10-10 12:20:10',
            //     },
            // ],
        };
    },
    computed: {
        ...mapState({
            /** 用户基础信息 */
            userBasicInfo: state => state.user.basicInfo,
        }),
        ...mapState('community', {
            videoDetailMap: state => state.videoDetailMap,
            commentsMap: state => state.commentsMap,
        }),
        post() {
            return this.videoDetailMap[this.postId] || null;
        },
        commentList() {
            return this.commentsMap[this.postId] || [];
        },
    },
    watch: {
    },
    methods: {
        onPublishComment(post) {
            api.navigateTo({
                url: '/pages/reply_editor/main',
                query: {
                    id: post.id,
                },
            });
        },
    },
    async created(query) {
        store.commit('utils/startRequest');
        this.postId = query.post_id;
        await Promise.all([
            store.dispatch('community/getVideoDetail', {
                postId: this.postId,
            }),
            store.dispatch('community/getVideoComment', {
                postId: this.postId,
            }),
        ]);
        store.commit('utils/endRequest');
    },
    onReachBottom() {
    },
    onShareAppMessage(res) {
        // console.log(res);
        return {
            title: this.post.title,
            imageUrl: '',
            path: `pages/post_detail/main?post_id=${this.postId}&referrer_id=${this.userBasicInfo.id}`,
        };
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.page-community-index {
    min-height: 100%;
    background-color: #F3F3F3;
    box-sizing: border-box;
}
</style>
